<template>
    <view class="mainPage">
        <cu-custom :isBack="true"></cu-custom>
        <view class="page flex flex-direction justify-center align-center">
            <view class="service-box">
                <view class="padding radius-xl bg-white" v-if="info.id">
                    <view class="text-center themeColor" v-if="info.verification">
                        <text class="cuIcon-roundcheckfill h1"></text>
                        <view class="text-bold text-sm margin-top-sm">核验成功</view>
                        <view class="text-bold text-sm margin-top-sm">{{ info.verification_time }}</view>
                    </view>
                    <view class="text-center text-red" v-else>
                        <text class="cuIcon-roundclosefill h1"></text>
                        <view class="text-bold text-sm margin-top-sm">项目还未核验</view>
                    </view>
                    <view class="padding margin-tb-lg">
                        <view class="flex justify-between margin-tb-sm">
                            <view class="text-grey">预约时间：</view>
                            <view class="text-bold">{{ info.start_time }}</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm">
                            <view class="text-grey">服务时长：</view>
                            <view class="text-bold themeColor">{{ info.duration }}分钟</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm">
                            <view class="text-grey">计划通勤时长：</view>
                            <view class="text-bold">{{ info.commuting_duration }}分钟</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm">
                            <view class="text-grey">计划抵达时间：</view>
                            <view class="text-bold">{{ info.plan_arrival_time }}</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm" v-if="info.commuting_time">
                            <view class="text-grey">实际通勤时长：</view>
                            <view class="text-bold" :class="{ 'text-red': info.timeout, 'themeColor': !info.timeout }">
                                {{ getTimeText(info.commuting_time) }}</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm">
                            <view class="text-grey">实际抵达时间：</view>
                            <view class="text-bold">{{ info.arrival_time }}</view>
                        </view>
                    </view>
                    <view class="button text-center margin-top-lg">
                        <button class="cu-btn china-btn-bg round" v-if="info.state === 1" @tap="departureModal">
                            <text class="padding-lr">出发</text>
                        </button>
                        <button class="cu-btn bg-red round" v-else-if="info.state === 2" @tap="arrivalModal">
                            <text class="padding-lr">抵达</text>
                        </button>
                        <view class="cu-btn bg-grey round" v-else-if="info.state === 3 && !info.verification">
                            <text class="padding-lr">请使用微信扫描核验码</text>
                        </view>
                        <button class="cu-btn china-btn-bg round" v-else-if="info.state === 3 && info.verification"
                            @tap="startServiceModal">
                            <text class="padding-lr">开始服务</text>
                        </button>
                        <button class="cu-btn bg-red round" v-else-if="info.state === 4" @tap="endServiceModal">
                            <x-countdown class="time" v-if="info.time > 0" :time="info.time" @end="getDetails" />
                            <text class="padding-lr">结束服务</text>
                        </button>
                    </view>
                </view>
            </view>
            <view class="service-box flex flex-direction justify-center align-center margin-top-lg">
                <view class="project-list padding-sm radius-xl bg-white">
                    <view class="address radius-xl padding-sm bg-white margin-bottom solid-bottom">
                        <view class="icon">
                            <image src="@/static/image/order/location.png" mode=""></image>
                        </view>
                        <view class="info margin-left-sm">
                            <view>
                                <text class="text-black">{{ info.name }}</text>
                                <text class="padding-left-sm">{{ info.mobile }}</text>
                            </view>
                            <view>
                                <text class="gray text-sm">{{ info.province }}{{ info.city }}{{ info.area }}{{ info.street
                                }}{{ info.address_detail }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="solid-bottom margin-bottom">
                        <view class="title">
                            <text class="cuIcon-titles themeColor"></text>预约项目
                        </view>
                        <view class="project padding-tb-sm">
                            <image :src="info.thumb" mode="" class="image"></image>
                            <view class="proBox padding-left-sm">
                                <view class="nameandtime">
                                    <view class="name text-bold text-black">{{ info.title }}</view>
                                    <view class="time text-gray text-sm">{{ info.duration }}分钟</view>
                                </view>
                                <view class="desc text-sm text-gray margin-bottom-sm">{{ info.tips }}</view>
                                <view class="cost">
                                    <view class="text-red text-bold">￥{{ info.price }}</view>
                                    <view class="num text-gray">x{{ info.num }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="title margin-bottom-sm">
                        <text class="cuIcon-titles themeColor"></text>订单信息
                    </view>
                    <view class="crow margin-bottom-sm text-sm">
                        <view class="name">客户</view>
                        <view class="content">
                            <view class="cu-avatar sm round" :style="{ backgroundImage: 'url(' + info.headimg + ')' }">
                            </view>
                            <text class="padding-left-xs text-bold">{{ info.nickname }}</text>
                        </view>
                    </view>
                    <view class="crow margin-bottom-sm text-sm">
                        <view class="name">订单编号</view>
                        <view class="content">
                            <text class="text-bold">{{ info.trade }}</text>
                        </view>
                    </view>
                    <view class="crow margin-bottom-sm text-sm">
                        <view class="name">预约时间</view>
                        <view class="content">
                            <text class="text-bold">{{ info.start_time }}</text>
                        </view>
                    </view>
                    <view class="crow margin-bottom-sm text-sm">
                        <view class="name">订单备注</view>
                        <view class="content">
                            <text class="text-bold">{{ info.remark }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <loading v-if="pageLoading" />
    </view>
</template>

<script>
let map;
export default {
    data() {
        return {
            pageLoading: false,
            search: {
                id: '',
                action: 'technician'
            },
            info: {}
        };
    },
    onLoad(options) {
        this.search.id = options.id
        this.getDetails();
        map = this.$utils.useMap();
    },
    methods: {
        getDetails() {
            this.pageLoading = true
            this.$utils.$api.AppointmentService.details(this.search).then(data => {
                this.info = data
                if (data.arrival_time) {
                    const arrival_time = new Date(data.arrival_time.replace(/-/g, '/'));
                    const plan_arrival_time = new Date(data.start_time.replace(/-/g, '/'));
                    plan_arrival_time.setMinutes(plan_arrival_time.getMinutes() + data.commuting_duration);
                    this.info.plan_arrival_time = `${this.getDayName(plan_arrival_time)} ${plan_arrival_time.getHours().toString().padStart(2, '0')}:${plan_arrival_time.getMinutes().toString().padStart(2, '0')}`;
                    this.info.timeout = false;
                    if (arrival_time > plan_arrival_time) {
                        this.info.timeout = true;
                    }
                }
                if (data.state === 4) {
                    const service_start_time = new Date(data.service_start_time.replace(/-/g, '/'));
                    service_start_time.setMinutes(service_start_time.getMinutes() + data.duration);
                    const now = new Date;
                    this.info.time = (service_start_time.getTime() - now.getTime()) / 1000;
                }
            }).catch((res) => {
            }).finally(() => {
                this.pageLoading = false
            })
        },
        departure(data) {
            this.$utils.$api.AppointmentService.departure(data).then(res => {
                this.getDetails()
            }).catch((err) => {
                this.pageLoading = false
                this.$utils.$message.error(err.msg);
            })
        },
        departureModal() {
            uni.showModal({
                title: '提示',
                content: '请确认您已整装待发。',
                confirmText: '确认出发',
                success: (res) => {
                    if (res.confirm) {
                        this.pageLoading = true
                        map.getCurrentPosition().then((result) => {
                            this.departure({
                                id: this.info.id,
                                latitude: result.position.lat,
                                longitude: result.position.lng
                            })
                        }).catch(() => {
                            this.departure({
                                id: this.info.id
                            })
                        });
                    }
                }
            })
        },
        arrival(data) {
            this.$utils.$api.AppointmentService.arrival(data).then(res => {
                this.getDetails()
            }).catch((err) => {
                this.pageLoading = false
                this.$utils.$message.error(err.msg);
            })
        },
        arrivalModal() {
            uni.showModal({
                title: '提示',
                content: '请确认您到达指定地点。',
                confirmText: '确认到达',
                success: (res) => {
                    if (res.confirm) {
                        this.pageLoading = true;
                        map.getCurrentPosition().then((result) => {
                            this.arrival({
                                id: this.info.id,
                                latitude: result.position.lat,
                                longitude: result.position.lng
                            })
                        }).catch(() => {
                            this.arrival({
                                id: this.info.id
                            })
                        });
                    }
                }
            })
        },
        startService(data) {
            this.$utils.$api.AppointmentService.startService(data).then(res => {
                this.getDetails()
            }).catch((err) => {
                this.pageLoading = false
                this.$utils.$message.error(err.msg);
            })
        },
        startServiceModal() {
            uni.showModal({
                title: '提示',
                content: '请确认您已准备好开始服务。',
                confirmText: '确认开始',
                success: (res) => {
                    if (res.confirm) {
                        this.pageLoading = true;
                        map.getCurrentPosition().then((result) => {
                            this.startService({
                                id: this.info.id,
                                latitude: result.position.lat,
                                longitude: result.position.lng
                            })
                        }).catch(() => {
                            this.startService({
                                id: this.info.id
                            })
                        });
                    }
                }
            })
        },
        endService(data) {
            this.$utils.$api.AppointmentService.endService(data).then(res => {
                this.getDetails()
            }).catch((err) => {
                this.pageLoading = false;
                this.$utils.$message.error(err.msg);
            })
        },
        endServiceModal() {
            if (this.info.state === 4) {
                const service_start_time = new Date(this.info.service_start_time.replace(/-/g, '/'));
                service_start_time.setMinutes(service_start_time.getMinutes() + this.info.duration);
                const now = new Date;
                this.info.time = (service_start_time.getTime() - now.getTime()) / 1000;
                if (this.info.time > 0) {
                    uni.showModal({
                        title: '提示',
                        content: '当前服务时间还未结束，是否确认提前结束服务？',
                        success: (res) => {
                            if (res.confirm) {
                                this.pageLoading = true;
                                map.getCurrentPosition().then((result) => {
                                    this.endService({
                                        id: this.info.id,
                                        action: this.search.action,
                                        latitude: result.position.lat,
                                        longitude: result.position.lng
                                    })
                                }).catch(() => {
                                    this.endService(this.search)
                                });

                            }
                        }
                    })
                } else {
                    map.getCurrentPosition().then((result) => {
                        this.endService({
                            id: this.info.id,
                            action: this.search.action,
                            latitude: result.position.lat,
                            longitude: result.position.lng
                        })
                    }).catch(() => {
                        this.endService(this.search)
                    });
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    min-height: 90vh;
    padding: 40px 0;
}

.box {
    width: 80vw;
    box-sizing: border-box;
}

.service-box {
    width: 100%;
    min-height: 50vh;
    padding: 0 30px;
    box-sizing: border-box;
}

.project-list {
    width: 100%;
    box-sizing: border-box;

    .project {
        display: flex;

        .image {
            width: 130upx;
            height: 130upx;
            border-radius: 20upx;
        }

        .proBox {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .nameandtime,
            .cost {
                display: flex;
                justify-content: space-between;
            }
        }
    }
}

.crow {
    justify-content: space-between
}

.h1 {
    font-size: 72rpx;
}

.address {
    display: flex;
    align-items: center;

    .icon {
        image {
            width: 44upx;
            height: 44upx;
        }

    }
}
</style>
